<template>
  <div class="main-box">
    <el-button
      type="primary"
      icon="el-icon-plus"
      style="margin-bottom: 16px"
      @click="handelAddServe(false)"
    >
      添加
    </el-button>
    <BaseTable :request="request" ref="baseTable">
      <el-table-column label="主机名称" prop="title" />
      <el-table-column label="公网Ip" prop="public_ip" />
      <el-table-column label="开始使用时间" prop="buy_date" />
      <el-table-column label="过期时间" prop="expire_date" />
      <el-table-column :label="$t('创建时间')" prop="create_time" />
      <el-table-column
        :label="$t('操作')"
        width="100px"
        align="right"
        fixed="right"
      >
        <template slot-scope="scope">
          <EditBtn @click="handelAddServe(scope.row)" />
          <DelBtn @success="handleDelete(scope.row)" />
        </template>
      </el-table-column>
    </BaseTable>
    <EditServer
      :server-info="serverInfo"
      :dialog-show.sync="dialogShow"
      @success="getListData"
    />
  </div>
</template>

<script>
import EditServer from './EditServer.vue'
import serverApi from '@/api/server'
export default {
  components: {
    EditServer
  },
  data() {
    return {
      request: serverApi.serverList,
      dialogShow: false,
      serverInfo: {}
    }
  },

  methods: {
    handelAddServe(row) {
      if (row) {
        this.serverInfo = this.$lodash.cloneDeep(row)
      } else {
        this.serverInfo = {}
      }
      this.dialogShow = true
    },
    getListData(type) {
      this.$refs.baseTable.getList(type)
    },
    async handleDelete(row) {
      const res = await serverApi.deleteServer({ id: row.id })
      if (res.code == 0) {
        this.getListData('search')
        this.$message.success(res.msg)
      }
    }
  }
}
</script>

<style lang="scss" scope></style>
